<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import LoginVerifyCode from '@/components/LoginVerifyCode.vue'
import { useUserStore } from '@/stores/user'
import type { IUser } from '@/types'
import { ElMessage } from 'element-plus'
import router from '@/router'

/**
 * 打印文字
 */

const textToType =
  '👾重温怀旧游戏魅力，跃动的像素画面，模拟器中重玩NES，感受🌟马里奥的欢乐冒险，街机世界等你征战！立即加入，共享游戏🎮激情，重拾童年回忆！'
let typedText = ref('')
let currentLength = 0

const printText = () => {
  if (currentLength <= textToType.length) {
    typedText.value = textToType.slice(0, currentLength)
    currentLength++
    setTimeout(printText, 30) // 每隔30ms打印一个字
  }
}
onMounted(() => {
  printText()
})

/**
 * 登录表单
 */
let loginFormRef = ref<IUser>()
let loginForm = reactive<IUser>({
  phone: '',
  password: ''
})

// 登录表单验证规则
const loginRules = {
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 16, message: '密码长度在6到16个字符', trigger: 'blur' }
  ]
}
// 登录表单提交 => 验证码
const handleLogin = (formRef: any) => {
  formRef.validate((valid: boolean) => {
    if (valid) {
      verifyAction()
    } else {
      console.log('error')
    }
  })
}

/**
 * 跳转提示弹窗
 */
let dialogVisible = ref(false)
const routeReady = () => {
  dialogVisible.value = true
  setTimeout(() => {
    router.push({
      path: '/home'
    })
  }, 1000)
}

/**
 * 验证码 => 跳转提示弹窗
 */
const userStore = useUserStore()

let verifyVisible = ref(false)
const verifyAction = () => {
  verifyVisible.value = true
}
const handleVerifySuccess = () => {
  verifyVisible.value = false
  //验证用户信息
  if (userStore.login(loginForm)) {
    routeReady()
  } else {
    ElMessage.error('登录失败，请检查手机号或密码')
  }
}
</script>

<template>
  <div class="login-view">
    <!-- 打印文字 -->
    <div class="welcome-text">
      <h2>{{ typedText }}</h2>
    </div>

    <!-- 登录框 -->
    <div class="login-panel">
      <el-form
        ref="loginFormRef"
        status-icon
        :model="loginForm"
        :rules="loginRules"
        label-width="70px"
      >
        <h2 class="login-title">欢迎登录多西柚</h2>
        <el-form-item label="手机号" prop="phone">
          <el-input
            placeholder="请输入手机号"
            autocomplete="off"
            class="login-input"
            v-model="loginForm.phone"
          />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            placeholder="请输入密码"
            autocomplete="off"
            type="password"
            v-model="loginForm.password"
            class="login-input"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleLogin(loginFormRef)" class="login-input"
            >登录</el-button
          >
        </el-form-item>
        <el-form-item>
          <RouterLink to="/register">
            <el-link :underline="false" type="primary">注册</el-link>
          </RouterLink>

          <el-link :underline="false" style="margin-left: 180px" type="primary">忘记密码?</el-link>
        </el-form-item>
      </el-form>
    </div>
    <!-- 验证码 -->
    <el-dialog v-model="verifyVisible" width="400px" title="验证码" style="border-radius: 10px">
      <LoginVerifyCode @success="handleVerifySuccess" />
    </el-dialog>

    <!-- 跳转提示 -->
    <el-dialog v-model="dialogVisible" width="30%" fullscreen center>
      <el-result icon="success" title="登录成功" sub-title="1秒后自动跳转到主页面" />
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
/* 打印文字 */
.welcome-text {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  color: #fff;
}
.login-input {
  width: 280px;
}
</style>
